<template>
    <div class="app-container">
        <aside>待审核编辑者列表</aside>
        <el-table
            :key="tableKey"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
        >
            <el-table-column label="ID" prop="id" align="center" width="100">
                <template slot-scope="{row}">
                    <span>{{ row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="姓名" min-width="140px">
                <template slot-scope="{row}">
                    <span>{{ row.username }}</span>
                </template>
            </el-table-column>
            <el-table-column label="联系方式" min-width="160px">
                <template slot-scope="{row}">
                    <span>{{ row.phone }}</span>
                </template>
            </el-table-column>
            <el-table-column label="邮件" min-width="200">
                <template slot-scope="{row}">
                    <span>{{ row.email }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="提交时间"
                width="200px"
                align="center"
                prop="createTime"
                sortable
            />

            <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
                <template slot-scope="{row}">
                    <el-button type="success" size="mini" @click="handlePass(row)">
                        通过
                    </el-button>
                    <el-button type="danger" size="mini" @click="handleReject(row)">
                        拒绝
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import { admitUserById, getAuditList, rejectUserById } from '@/api/user'
import { sleep } from '@/utils' // secondary package based on el-pagination

export default {
    name: 'VerifyingList',
    directives: { waves },
    data() {
        return {
            tableKey: 0,
            list: null,
            mutex: true // 互斥锁, 只有在锁开的时候才能从后台拉取数据
        }
    },
    created() {
        this.getList()
        // 每5秒刷新一次审核数据
        const timer = setInterval(() => {
            this.getList()
        }, 5000)
        this.$once('hook:beforeDestroy', () => {
            clearInterval(timer)
        })
    },
    methods: {
        // 若正在操作则不拉取数据
        async getList() {
            while (!this.mutex) {
                await sleep(100)
                console.log('等待互斥锁解锁')
            }
            getAuditList().then(list => {
                this.list = list
            })
        },
        handlePass(row) {
            this.$confirm('是否通过 ' + row.username + ' 的审核?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                admitUserById(row.id).then(() => {
                    this.deleteRowById(row.id)
                    this.$message({
                        type: 'success',
                        message: '审核通过成功!'
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                })
            })
        },
        handleReject(row) {
            this.$confirm('是否拒绝 ' + row.username + ' 的审核, 并删除其注册信息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                rejectUserById(row.id).then(() => {
                    this.deleteRowById(row.id)
                    this.$message({
                        type: 'warning',
                        message: '审核已拒绝!'
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                })
            })
        },
        // 操作完成后删除指定id行, 操作时会进行加锁
        deleteRowById(id) {
            this.mutex = false
            const index = this.list.findIndex(v => v.id === id)
            this.list.splice(index, 1)
            this.mutex = true
        }
    }
}
</script>
